@tailwind base;
@tailwind components;
@tailwind utilities;

html {
   background-color: #000 !important;
}

html, body {
  background: #000;
  min-height: 100vh !important; 
  margin: 0;
  padding: 0;
}
body {
  color: #131318;
}

body input,
body textarea {
  color: #131318;
}

a {
  color: #1D4ED8;
  text-decoration: none;
}

p {
  margin: 8px 0;
}

code {
  color: #ffa500;
}

li {
  padding: 4px;
}

@keyframes leftToRight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes rightToLeft {
  0% {
    width: 0%;
    right: 0;
  }
  100% {
    width: 100%;
    right: 0;
  }
}

@keyframes topToBottom {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

@keyframes bottomToTop {
  0% {
    height: 0%;
    top: 100%;
  }
  100% {
    height: 100%;
    top: 0;
  }
}


.animate-borders .border-top {
  animation: leftToRight 1.5s ease-out forwards;
}

.animate-borders .border-side {
  animation: bottomToTop 1.5s ease-out forwards;
}


.animate-borders .border-bottom {
  animation: rightToLeft 1.5s ease-out forwards;
}

.animate-border-group .border-t {
  animation: leftToRight 1s forwards 1s;
}

.animate-border-group .border-b {
  animation: leftToRight 1s forwards 1.5s;
}

.animate-border-group .border-l {
  animation: topToBottom 1s forwards 1s;
}

.animate-border-group .border-r {
  animation: bottomToTop 1s forwards 2.5s;
}

.animate-border-group .border-container  .border-t {
  animation: rightToLeft 1s forwards 1.75s;
}

.animate-border-group .border-container  .border-b {
  animation: leftToRight 0.1s forwards 1s;
}

.animate-border-group .border-container .border-l {
  animation: bottomToTop 1s forwards 2s;
}

.animate-border-group .border-container  .border-r {
  animation: bottomToTop 1s forwards 1s;
}

@keyframes spinBorder {
  0% {
    transform: rotate(0deg);
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  25% {
    border-right-color: #B2AB9D;
  }
  50% {
    border-bottom-color: #B2AB9D;
  }
  75% {
    border-left-color: #B2AB9D;
  }
  100% {
    transform: rotate(-360deg); 
    border-top-color: #B2AB9D;
    border-right-color: #B2AB9D;
    border-bottom-color: #B2AB9D;
    border-left-color: #B2AB9D;
  }
}

.animate-border-group .circle-border-animation {
  border: 1px solid transparent; 
  border-radius: 50%;
  animation: spinBorder 2s linear forwards 2s;
}

div.fp-watermark {
    display: none;
}

.markdown {
  h1, h2, h3, h4, h5, h6, li, p {
    color: rgba(255, 255, 255, 0.9);
  }
  h1 {
    font-weight: 600;
    font-size: 30px;
    
    line-height: 38px;
  }

  h2 {
    margin: 40px 0 16px 0;
    
  }

  h3 {
    margin: 16px 0;
  }

  img {
    max-width: 750px;
    width: 100%;
  }

  p {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 28px;
  }

  ul {
    list-style: disc;
    padding-left: 2em;

    li {
      margin-bottom: 4px;
      font-size: 14px;
      line-height: 24px;
      list-style: inherit;
    }
  }

  blockquote {
    padding: 0 16px;
    color: #d8d6d6;
    border-left: 4px solid #ddd;
  }

  table {
    display: table;
    max-width: 100% !important;
    width: 100%;
    margin: 24px 0 20px 0;
    table-layout: fixed;
    border: 1px solid rgba(105, 122, 140, 0.1);

    tr {
      background-color: #fff;
      box-shadow: 0 1px 0 0 rgba(105, 122, 140, 0.1);
    }

    th {
      padding: 6px 12px;
      border: 1px solid rgba(105, 122, 140, 0.1);
      background-color: #fafbfc;
      text-align: center;
    }

    td {
      border: 1px solid rgba(105, 122, 140, 0.1);
      padding: 6px 12px;
      word-break: break-word;
      text-align: left;
    }
  }

}
